<page-grid>
  <nz-card [nzBordered]="false" class>
    <form nz-form se-container="1" size="compact" gutter="32" [labelWidth]="null">
      <se label="所属类目" line>
        <tag-select>
          <nz-tag *ngFor="let i of categories; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeCategory($event, idx)">{{ i.text }}</nz-tag>
        </tag-select>
      </se>
      <se label="其它选项">
        <div class="ant-form ant-form-inline">
          <nz-form-item>
            <nz-form-label nzFor="rate">作者</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="q.user" name="user" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" style="width: 100px;">
                <nz-option [nzLabel]="'李三'" [nzValue]="'lisa'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzFor="rate">好评度</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="q.rate" name="rate" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" style="width: 100px;">
                <nz-option [nzLabel]="'优秀'" [nzValue]="'good'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </se>
    </form>
  </nz-card>
  <nz-list [nzLoading]="loading" [nzRenderItem]="item" [nzDataSource]="list" [nzGrid]="{ gutter: 24, lg: 6, md: 8, sm: 12, xs: 24 }">
    <ng-template #item let-item>
      <nz-list-item>
        <nz-card nzHoverable [nzCover]="cover">
          <ng-template #cover>
            <img alt="{{ item.title }}" src="{{ item.cover }}">
          </ng-template>
          <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription">
            <ng-template #nzTitle>
              <a (click)="msg.success('标题：' + item.id)">{{ item.title }}</a>
            </ng-template>
          </nz-card-meta>
          <div class="card-item-content">
            <span class="text-grey">{{ item.updatedAt | _date: 'fn' }}</span>
            <avatar-list size="mini">
              <avatar-list-item *ngFor="let m of item.members" [src]="m.avatar" [tips]="m.name"></avatar-list-item>
            </avatar-list>
          </div>
        </nz-card>
      </nz-list-item>
    </ng-template>
  </nz-list>
</page-grid>